<template>
  <div id="orderMsg">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="订单编号" width="180">
      </el-table-column>
      <el-table-column prop="orderTime" label="下单时间" width="200">
      </el-table-column>
      <el-table-column prop="total" label="总价"> </el-table-column>
      <el-table-column prop="status" label="状态"> </el-table-column>
      <el-table-column prop="customerId" label="顾客ID"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="oderDetail(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  mounted() {
    var id = this.id;
    var self = this;
    this.$axios
      .get("/order/query", { params: { customerId: id } })
      .then((res) => {
        console.log(res.data.data);
        self.tableData = res.data.data;
        self.orderTime(self.tableData.orderTime);
      });
  },
  data() {
    return {
      tableData: [],
    };
  },
  props: ["id"],
  methods: {
    //跳转到查询订单页面
    oderDetail(data) {
      var id = data.id;
      this.$router.push({ path: "/orderDetail/index", query: { id } });
    },
    //转换时间函数
    orderTime() {
      for (var i = 0; i < this.tableData.length; i++) {
        var data = new Date(this.tableData[i].orderTime);
        this.tableData[i].orderTime = data.toLocaleString();
      }
    },
  },
};
</script>